// import React from "react";
import React from "./react";
class Counter3Child extends React.Component{

    componentWillMount(){
        console.log('child componentWillMount');
    }
    componentDidMount(){
        console.log('child componentDidMount');
    } 
    componentWillReceiveProps(){
        console.log('child componentWillReceiveProps');
    }
    shouldComponentUpdate(nextProps){
        console.log('child shouldComponentUpdate');
        return  nextProps.number %3 === 0 
    }
    componentWillUpdate(){
        console.log('child componentWillUpdate');
    }
    componentDidUpdate(){
        console.log('child componentDidUpdate');
    }
    componentWillUnmount(){
        console.log('child componentWillUnmount');
    }
    
    render(){
        return (<div>
         <p>{this.props.number}</p>
        </div>)
    }
}


class Counter3 extends React.Component{
    static defaultProps ={
        title:'标题'
    }
    constructor(props){
      super(props)
      console.log('constructor');
      this.state={
        number:1
      }
    }
    componentWillMount(){
        console.log('componentWillMount');
    }
    componentDidMount(){
        console.log('componentDidMount');
    } 
    shouldComponentUpdate(nextProps,nextState){
        console.log('shouldComponentUpdate',nextState);
        return  nextState.number % 2 === 0 
    }
    componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    componentDidUpdate(){
        console.log('componentDidUpdate');
    }
    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
    

    add =()=>{
      this.setState({
        number:this.state.number + 1
      })
    }
  
    render(){
        return (<div>
         <p>{this.props.title}{this.state.number}</p>
         {
            this.state.number === 4 ? null :   <Counter3Child number={this.state.number}></Counter3Child>
         }
       
         <button onClick={this.add}>+</button>
        </div>)
    }
}

export default Counter3